<template>
	<view class="list" :style="{padding:padding}">
		<view class="acea-row row-middle row-between">
			<view class="module-title">
				{{title}}
			</view>
			<view class="add-advantage red-sanjiao-r" @click="addAd">
				没找到合适的？选择自定义
			</view>
		</view>
		<view class="acea-row advantage-list">
			<view class="itemBox" v-for="(item,index) in advantages" :key="index">
				<!-- <icon type="cancel" color="#000" size="14" @click="closeAdvantages(item,index)" class="close" /> -->
				<view class="item" :class="storeAdvantage.indexOf(item)!=-1?'item-on':''"
					@click="advantageChecked(item,index)">{{item}}</view>
			</view>
		</view>
		<addKeyWord ref="addKeyWord" @addConfirm="addConfirm" />
	</view>
</template>

<script>
	import addKeyWord from '../components/addKeyWord/addKeyWord.vue'
	import {getKeywords} from '@/api/api.js'
	export default {
		name: "chooseKeywords",
		components: {
			addKeyWord,
		},
		props:{
			title:{
				type:String,
				default:''
			},
			padding:{
				type: String,
				default:"0"
			},
			advantages:{
				type: Array,
				default:()=>([])
			},
			advantageIds:{
				type: Array,
				default:()=>([])
			},
			storeAdvantage:{
				type: Array,
				default:()=>([])
			},
			type:{
				type: [String,Number],
				default:''
			},
			typeOn:{
				type:[String,Number],
				default:''
			}
		},
		data() {
			return {
				// advantages: [], //店铺优势
				// advantageIds: [],
			};
		},
		watch:{
			typeOn(){
				this.getKeywordsData();
			}
		},
		mounted() {
			this.getKeywordsData();
		},
		methods: {
			//添加店铺优势
			addAd() {
				this.$refs.addKeyWord.popupShow = true
			},
			addConfirm(e) {
				this.$emit('advantages',this.advantages.concat(e));
			},
			getKeywordsData(){
				let p={}
				if(this.type){
					p.type =this.type
				}
				getKeywords(p).then(res=>{
					let d = [];
					res.data.list && res.data.list.forEach(ky=>{
						if(this.advantages.indexOf(ky.keyword) == -1){
							d.push(ky.keyword);
						}
					})
					if(d.length>0){
						this.$emit('advantages',[...d,...this.advantages]);
					}
					
					this.$emit('inited')
					// console.log("res",res);
					// this.$emit('advantages',this.advantages.concat(e));
				})
			},
			closeAdvantages(item, index) {
				let advantages = [...this.advantages];
				let advantageIds = [...this.advantageIds]
				let storeAdvantage = [...this.storeAdvantage]
				advantages.splice(index, 1)
				if (advantageIds.indexOf(index) != -1) {
					let idx =advantageIds.indexOf(index)
					advantageIds.splice(idx, 1);
					storeAdvantage.splice(index, 1)
				}
				this.$emit('advantages',advantages);
				this.$emit('advantageIds',advantageIds)
				this.$emit('storeAdvantage',storeAdvantage)
			},
			advantageChecked(item, index) {
				let advantages = [...this.advantages];
				let advantageIds = [...this.advantageIds]
				let storeAdvantage = [...this.storeAdvantage]
				if (advantageIds.indexOf(index) != -1) {
					let idx = advantageIds.indexOf(index)
					advantageIds.splice(idx, 1);
					storeAdvantage.splice(idx, 1)
				} else {
					advantageIds.push(index);
					storeAdvantage.push(item)
				}
				this.$emit('advantages',advantages);
				this.$emit('advantageIds',advantageIds)
				this.$emit('storeAdvantage',storeAdvantage)
			},
		}
	}
</script>

<style>
	@import '/static/css/releaseForm.css';
</style>